<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用jQuery的hover和click事件设计折叠与展开网页内容的特效</title>

<link href="css/public.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
</head>

<body>
<div class="con tools_box" >
  <div class="con bottom"  ><div class="col " >
    <div class="t">库存：</div>
      <div class="select_box"><span class="d">全部地区</span><span class="arrow"></span>
        <div class="select_pop">
         <div class="close"></div>
         <div class="head">请选择库存地区</div>
          <ul>
            <li><a href="">全部</a></li>
            <li><a href="">北京</a></li><li><a href="">天津</a></li>
            <li><a href="">河北</a></li><li><a href="">山西</a></li>
            <li><a href="">内蒙古</a></li><li><a href="">辽宁</a></li>
            <li><a href="">吉林</a></li><li><a href="">黑龙江</a></li>
            <li><a href="">上海</a></li><li><a href="">江苏</a></li>
            <li><a href="">浙江</a></li><li><a href="">安徽</a></li>
            <li><a href="">福建</a></li><li><a href="">江西</a></li>
            <li><a href="">山东</a></li><li><a href="">河南</a></li>
            <li><a href="">湖北</a></li><li><a href="">湖南</a></li>
            <li><a href="">广东</a></li><li><a href="">广西</a></li>
            <li><a href="">海南</a></li><li><a href="">重庆</a></li>
            <li><a href="">四川</a></li><li><a href="">贵州</a></li>
            <li><a href="">云南</a></li><li><a href="">西藏</a></li>
            <li><a href="">陕西</a></li><li><a href="">甘肃</a></li>
            <li><a href="">青海</a></li><li><a href="">宁夏</a></li>
            <li><a href="">新疆</a></li><li><a href="">台湾</a></li>
            <li><a href="">香港</a></li><li><a href="">澳门</a></li>        
          </ul>
       </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(function(){
	  $('.select_box').hover(function () {
		  $(this).find('.select_pop').show();
	  }, function () {
		  $(this).find('.select_pop').hide();
	  });
	  $('.select_pop .close').click(function () {
		  $(this).parent().hide();
	  });	
  });
</script>

</body>

</html>
